<template>
  <view 
    v-if="visible" 
    class="toast-notification-overlay"
    :class="{ 'toast-show': visible }"
  >
    <view 
      class="toast-notification-container"
      :class="{ 
        'toast-slide-up': visible, 
        'toast-fade-out': isFadingOut,
        [`toast-type-${type}`]: type
      }"
      @click.stop
    >
      <!-- 图标 -->
      <view class="toast-icon-small">
        <text class="icon-emoji">{{ computedIcon }}</text>
      </view>
      
      <!-- 文字内容 -->
      <view class="toast-text">
        <text class="toast-title-small">{{ title }}</text>
        <text v-if="message" class="toast-message">{{ message }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ToastNotification',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    message: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'success', // success, error, info, warning
      validator: (value) => ['success', 'error', 'info', 'warning'].includes(value)
    },
    icon: {
      type: String,
      default: '' // 如果为空，根据type自动选择
    },
    duration: {
      type: Number,
      default: 2500 // 显示时长（毫秒）
    }
  },
  data() {
    return {
      isFadingOut: false
    }
  },
  computed: {
    computedIcon() {
      if (this.icon) {
        return this.icon
      }
      // 根据类型自动选择图标
      const iconMap = {
        success: '✨',
        error: '❌',
        info: 'ℹ️',
        warning: '⚠️'
      }
      return iconMap[this.type] || '✨'
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.isFadingOut = false
        const fadeOutTime = Math.max(500, this.duration - 500)
        // 开始淡出的时间
        setTimeout(() => {
          this.isFadingOut = true
        }, fadeOutTime)
        // 自动关闭
        setTimeout(() => {
          this.$emit('close')
        }, this.duration)
      }
    }
  }
}
</script>

<style scoped>
.toast-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 150rpx;
}

.toast-notification-overlay.toast-show {
  pointer-events: auto;
}

.toast-notification-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  border-radius: 50rpx;
  padding: 20rpx 32rpx;
  min-width: 300rpx;
  max-width: 80%;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
  transform: translateY(200rpx);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toast-notification-container.toast-slide-up {
  transform: translateY(0);
  opacity: 1;
}

.toast-notification-container.toast-fade-out {
  transform: translateY(-100rpx);
  opacity: 0;
}

/* 不同类型样式 */
.toast-notification-container.toast-type-success {
  background: rgba(16, 185, 129, 0.85);
}

.toast-notification-container.toast-type-error {
  background: rgba(239, 68, 68, 0.85);
}

.toast-notification-container.toast-type-info {
  background: rgba(59, 130, 246, 0.85);
}

.toast-notification-container.toast-type-warning {
  background: rgba(245, 158, 11, 0.85);
}

/* 小图标 */
.toast-icon-small {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-emoji {
  font-size: 32rpx;
  animation: iconSpin 0.6s ease-out;
}

@keyframes iconSpin {
  0% {
    transform: rotate(-180deg) scale(0);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* 文字内容 */
.toast-text {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  flex: 1;
  min-width: 0;
}

.toast-title-small {
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.toast-message {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.2;
}

/* 响应式调整 */
@media (max-width: 750rpx) {
  .toast-notification-container {
    padding: 18rpx 28rpx;
    min-width: 280rpx;
  }
  
  .toast-title-small {
    font-size: 26rpx;
  }
  
  .toast-message {
    font-size: 22rpx;
  }
}
</style>

